<template>
  <el-dialog
      v-model="visible"
      title="读卡信息"
      width="60%"
      class="read-card-dialog"
      destroy-on-close
  >
    <!-- 基本信息 -->
    <div class="basic-info">
      <el-descriptions :column="3" border class="description">
        <el-descriptions-item label="编号">{{ cardData?.baseinfo?.psn_no || '-' }}</el-descriptions-item>
        <el-descriptions-item label="证件类型">{{ cardData?.baseinfo?.naty === '01' ? '身份证' : '其他' }}</el-descriptions-item>
        <el-descriptions-item label="证件号码">{{ cardData?.baseinfo?.certno || '-' }}</el-descriptions-item>
        <el-descriptions-item label="姓名">{{ cardData?.baseinfo?.psn_name || '-' }}</el-descriptions-item>
        <el-descriptions-item label="性别">{{ dictStore.getMateDictInfo(dictDataMap["sys_user_sex"], cardData?.baseinfo?.gend)?.dictLabel || '-' }}</el-descriptions-item>
        <el-descriptions-item label="民族">{{ dictStore.getMateDictInfo(dictDataMap["nation_dict"], cardData?.baseinfo?.naty)?.dictLabel || '-' }}</el-descriptions-item>
        <el-descriptions-item label="出生日期">{{ cardData?.baseinfo?.brdy || '-' }}</el-descriptions-item>
        <el-descriptions-item label="年龄">{{ cardData?.baseinfo?.age || '-' }}岁</el-descriptions-item>
      </el-descriptions>
    </div>

    <!-- 参保信息和身份信息 -->
    <el-tabs v-model="activeTab" class="card-tabs">
      <!-- 参保信息 -->
      <el-tab-pane label="参保信息" name="insurance">
        <el-table :data="cardData?.insuinfo || []" height="250px" class="insurance-table">
          <el-table-column prop="balc" label="余额" width="100" align="right"/>
          <el-table-column prop="insutype" label="险种类型" width="150">
            <template #default="{ row }">
              <span v-for="(item, index) in dictDataMap['insurance_type']" :key="index">
                <span v-if="item.dictValue === row.insutype">{{ item.dictLabel }}</span>
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="psn_insu_stas" label="人员参保状态" width="150">
            <template #default="{ row }">
              <el-tag :type="row.psn_insu_stas === '1' ? 'success' : 'danger'">
                <span v-for="(item, index) in dictDataMap['psn_insu_stas']" :key="index">
                  <span v-if="item.dictValue === row.psn_insu_stas">{{ item.dictLabel }}</span>
                </span>
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="psn_insu_date" label="个人参保日期" width="150"/>
          <el-table-column prop="paus_insu_date" label="暂停参保日期" width="150"/>
          <el-table-column prop="cvlserv_flag" label="公务员标志" width="120">
            <template #default="{ row }">
          <span v-for="(item, index) in dictDataMap['cvlserv_flag']" :key="index">
            <span v-if="item.dictValue === row.cvlserv_flag">{{ item.dictLabel }}</span>
          </span>
            </template>
          </el-table-column>
          <el-table-column prop="insuplc_admdvs" label="参保地医保区划" min-width="180"/>
          <el-table-column prop="emp_name" label="单位名称" min-width="150"/>
        </el-table>
      </el-tab-pane>

      <!-- 身份信息 -->
      <el-tab-pane label="身份信息" name="identity">
        <el-table :data="cardData?.idetinfo || []" height="250px" class="identity-table">
          <el-table-column prop="psn_idet_type" label="身份类型" width="150">
            <template #default="{ row }">
          <span v-for="(item, index) in dictDataMap['psn_idet_type']" :key="index">
            <span v-if="item.dictValue === row.psn_idet_type">{{ item.dictLabel }}</span>
          </span>
            </template>
          </el-table-column>
          <el-table-column prop="psn_type_lv" label="等级" width="100"/>
          <el-table-column prop="begntime" label="开始时间" width="180"/>
          <el-table-column prop="endtime" label="结束时间" width="180"/>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <!-- 加载提示 -->
    <div v-if="isLoading" class="loading-tip">
      <el-skeleton :rows="5" animated />
    </div>

    <!-- 错误提示 -->
    <div v-else-if="error" class="error-tip">
      <el-alert :title="error.message" type="error" show-icon />
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import type { MedicalCardData } from '@/api/msip/readCard.ts';
import { useDictStoreHook } from "@/store/modules/dict.ts";
import { ref } from 'vue';

const dictStore = useDictStoreHook();
let dictDataMap = ref(dictStore.isTypeGetData("sys_user_sex","nation_dict", "insurance_type","cvlserv_flag","psn_type",
    "psn_insu_stas","psn_idet_type","psn_type_lv" ));
const props = defineProps({
  cardData: {
    type: Object as () => MedicalCardData,
    required: true
  }
});

const visible = ref(false);
const activeTab = ref('insurance');

const show = () => {
  if (props.cardData && props.cardData.baseinfo) {
    visible.value = true;
  } else {
    console.error('读卡弹窗失败！请检查读卡数据！');
  }
};

const hide = () => visible.value = false;

defineExpose({ show, hide });
</script>

<style scoped>.read-card-dialog {
  :deep(.el-dialog__body) {
    padding: 20px;
    background-color: #f9f9f9; /* 添加背景色 */
  }

  .basic-info {
    margin-bottom: 20px;
    background-color: #fff;
    padding: 20px; /* 增加内边距 */
    border-radius: 8px; /* 圆角设计 */
  }

  .description {
    font-size: 20px !important; /* 增大字体大小 */
    color: #333 !important; /* 颜色更醒目 */
  }

  .description::v-deep(.el-descriptions__label) {
    font-weight: bold !important; /* 增加字体粗细 */
    color: #2c3e50 !important; /* 标签颜色更醒目 */
    font-size: 18px !important; /* 增大标签字体大小 */
  }

  .description::v-deep(.el-descriptions__content) {
    color: #333 !important; /* 内容颜色更醒目 */
    font-size: 18px !important; /* 增大内容字体大小 */
  }

  .card-tabs {
    margin-top: 20px;

    :deep(.el-tabs__header) {
      margin-bottom: 15px;
    }

    :deep(.el-tabs__nav-wrap::after) {
      background-color: #409EFF; /* tab 下划线颜色 */
    }

    :deep(.el-tabs__item.is-active) {
      color: #409EFF; /* 活跃 tab 颜色 */
      font-weight: bold;
    }
  }

  .insurance-table, .identity-table {
    width: 100%;
    font-size: 14px; /* 增大表格字体大小 */
    color: #333; /* 表格颜色更醒目 */

    :deep(.cell) {
      text-align: center; /* 表格内容居中对齐 */
    }
  }

  .loading-tip {
    text-align: center;
    margin-top: 50px;
    font-size: 18px; /* 加载提示字体大小 */
    color: #666; /* 加载提示颜色 */
  }

  .error-tip {
    text-align: center;
    margin-top: 50px;
    font-size: 18px; /* 错误提示字体大小 */
    color: #F56C6C; /* 错误提示颜色 */
  }
}
</style>
